<template>
  <van-field v-model="value" v-bind="$attrs" />
</template>

<script setup lang="ts">
import { computed } from 'vue'

import { useCustomFieldValue } from '@vant/use'

export interface VInputProps {
  modelValue: string
}

const props = withDefaults(defineProps<VInputProps>(), {
  modelValue: ''
})

const emits = defineEmits({
  'update:modelValue': (val) => !!val
})

useCustomFieldValue(() => props.modelValue)

const value = computed({
  get: () => {
    return props.modelValue
  },
  set: (val) => {
    emits('update:modelValue', val)
  }
})

defineOptions({
  name: 'VInput'
})
</script>

<style scoped></style>
